<template>
    <div>
        {{ count }} -- {{ msg }} ---- {{ hhh }}
        <br />
        <button @click="addHhh">click</button>
        <br />
        <input type="text" v-model="msg1" @keyup="changeIpt" />
        <button @click="hClick">click</button>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue';
import { addCount } from './hooks';

export default {
    props: {
        count: Number,
        msg: String,
    },
    setup (props, context) {
        const { emit } = context;
        const state = reactive({
            age: props.count,
            msg1: props.msg,
        });
        onMounted(() => {
            console.log(props, context);
        });
        const hClick = () => {
            state.age += 1;
        };
        const { hhh, addHhh } = addCount();
        const changeIpt = (e) => {
            state.msg1 = e.target.value;
        };
        // watch(
        //     () => state.msg1,
        //     (newVal) => {
        //         emit('update:msg', newVal);
        //     },
        // );
        // watch(
        //     () => state.age,
        //     (newVal) => {
        //         emit('update:count', newVal);
        //     },
        // );
        watch(
            () => [state.msg1, state.age],
            ([newMsg, newAge]) => {
                emit('update:msg', newMsg);
                emit('update:count', newAge);
            },
        );
        return {
            ...toRefs(state), hClick, hhh, changeIpt, addHhh,
        };
    },
};
</script>

<style>

</style>
